#page-6 {
  display: none;
  position: absolute;
  @include square(100%);
  background-image: url("../image/page-6-bg.jpg");
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  transform-origin: center center;
  -webkit-transform-origin: center center;
  z-index: 10;
  top: 0;
  left: 0;
  overflow: hidden;

  > .tong {
    position: absolute;
    @include size(px2rem-b(680px), px2rem-b(870px));
    background-image: url("../image/page-6-tong.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    top: 0;
    left: 0;
  }

  > .blink {
    //270 / 416 629
    position: absolute;
    @include square(px2rem-b(853px));
    top: px2rem-b(104px);
    left: px2rem-b(-14px);
  }

  > .hui {
    position: absolute;
    top: 0;
    @include size(px2rem-b(405px), px2rem-b(758px));
    background-image: url("../image/page-6-zs-1.png");
    background-size: 100% 100%;
    left: px2rem-b(274px);
    opacity: 0;
  }

  > .zs-1 {
    position: absolute;
    top: 0;
    right: 0;
    width: px2rem-b(750px);
    height: 100%;
    background-image: url("../image/page-6-zs-2.png");
    background-size: 100% 100%;
    opacity: 0;
    display: none;

    .v-2, .v-3, .v-4, .v-5, .v-6 {
      position: absolute;
      left: px2rem-b(80px);
      color: #b5b7be;
      font-family: load;
      font-size: px2rem-b(26px);
      font-weight: bold;
      line-height: 1;
      animation: showword 1s linear;
      -webkit-animation: showword 1s linear;
      opacity: 0;
    }

    .v-2 {
      top: px2rem-b(435px);
    }

    .v-3 {
      top: px2rem-b(475px);
      -webkit-animation-delay: 1s;
      animation-delay: 1s;
    }

    .v-4 {
      top: px2rem-b(515px);
      -webkit-animation-delay: 2s;
      animation-delay: 2s;
    }

    .v-5 {
      top: px2rem-b(555px);
      -webkit-animation-delay: 3s;
      animation-delay: 3s;
    }

    .v-6 {
      top: px2rem-b(595px);
      -webkit-animation-delay: 4s;
      animation-delay: 4s;
    }

    .slight {
      @include size(px2rem-b(443px), 100%);
      background-size: 100% 100%;
      position: absolute;
      top: 0;
      right: px2rem-b(177px);
      opacity: 0;
      &.s-2 {
        background-image: url("../image/page-6-light-R2.png");
      }

      &.s-3 {
        background-image: url("../image/page-6-light-R3.png");
      }

      &.s-4 {
        background-image: url("../image/page-6-light-R4.png");
      }

      &.s-5 {
        background-image: url("../image/page-6-light-R5.png");
      }

      &.s-6 {
        background-image: url("../image/page-6-light-R6.png");
      }
    }

  }

  > .line {
    position: absolute;
    top: px2rem-b(204px);
    left: px2rem-b(607px);
    height: px2rem-b(196px);
    width: 0;
    background-image: url("../image/page-6-zs-3.png");
    background-size: auto 100%;
    background-position: left;
  }

  > .zs-2 {
    position: absolute;
    @include size(px2rem-b(584px), px2rem-b(175px));
    background-image: url("../image/page-6-zs-4.png");
    background-size: 100% 100%;
    top: px2rem-b(230px);
    left: px2rem-b(770px);
    opacity: 0;
    display: none;
  }
}

@keyframes showword {
  from {
    opacity: 0;
    color: #b5b7be;
  }
  80% {
    opacity: 1;
    color: #00d6e7;
  }
  to {
    opacity: 1;
    color: #b5b7be;
  }
}

@-webkit-keyframes showword {
  from {
    opacity: 0;
    color: #b5b7be;
  }
  80% {
    opacity: 1;
    color: #00d6e7;
  }
  to {
    opacity: 1;
    color: #b5b7be;
  }
}